import React from 'react';
import { Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message } from 'antd';
import moment from 'moment'
import OperatorConstant from "../../utils/OperatorConstant";
import CurrencySelect from '../../components/commons/CurrencySelect'


const R = require('ramda');
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const view = "view"

export default Form.create({ wrappedComponentRef: true })(class Preinvoiceopen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            type: "",
            loading: false,
        }
    }

    handleCancel = () => {
        this.setState({ open: false });
        this.handleResetFields();
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    }


    handleOpen = (type) => {
        this.state.type = type;
        this.setState({ open: true });
    }


    preinvoiceopen = () => {
        this.props.form.validateFields((errors, values) => {
            if (errors) return;
            this.setState({ loading: true });
            let head = R.isNil(this.props.invoices) || R.isEmpty(this.props.invoices) ? {} : this.props.invoices[0];
            this.props.dispatch({
                type: this.props.dataSource && this.props.dataSource.id ? 'invoice/updatePreInvoice' : 'invoice/preinvoiceopen',
                payload: {
                    preamount: values.preamount,
                    prerate: values.prerate,
                    precharge: values.precharge,
                    amountcurrency: values.amountcurrency,
                    chargecurrency: values.chargecurrency,
                    orderId: head.orderId,
                    id: this.props.dataSource && this.props.dataSource.id ? this.props.dataSource.id : undefined,
                    onSuccess: () => {
                        this.handleCancel();
                        this.props.handleSearch();
                        this.setState({ loading: false });
                    },
                    onFail: () => {
                        this.setState({ loading: false })
                    }
                }
            })
        })
    }




    render() {
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let disabled = (this.state.type == OperatorConstant.view ? true : false);
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 6 }, },
            wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, },
        };
        let footer = [];

        footer.push(<Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>取消</Button>);


        if (this.state.type != OperatorConstant.view) {
            footer.push(<Button key="apply" size="large" loading={this.state.loading} onClick={this.preinvoiceopen.bind(this)}>保存</Button>);

        }

        return (
            <Modal maskClosable={false} visible={this.state.open} title={"预开票"} width={600} wrapClassName="vertical-center-modal"
                onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <FormItem {...formItemLayout} label="预估外汇" hasFeedback>
                        {getFieldDecorator('preamount', {
                            rules: [{
                                required: true, message: '请输入预估外汇',
                            }],
                            initialValue: dataSource.preamount
                        })(
                            <InputNumber style={{ width: "100%" }} disabled={disabled} min={0} max={99999999999999} precision={2}/>
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="预估外汇币种" hasFeedback>
                        {getFieldDecorator('amountcurrency', {
                            rules: [{
                                required: true, message: '请选择币种！',
                            }],
                            initialValue: dataSource.amountcurrency
                        })(
                            <CurrencySelect style={{ width: '100%' }} disabled={disabled} />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="预估费用(含代理费)" hasFeedback>
                        {getFieldDecorator('precharge', {
                            rules: [{
                                required: true, message: '请输入预估费用',
                            }],
                            initialValue: dataSource.precharge
                        })(
                            <InputNumber style={{ width: "100%" }} disabled={disabled} placeholder="预估费用请加上代理手续费" min={0} max={99999999999999} precision={2}/>
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="预估费用币种" hasFeedback>
                        {getFieldDecorator('chargecurrency', {
                            rules: [{
                                required: true, message: '请选择币种！',
                            }],
                            initialValue: dataSource.chargecurrency
                        })(
                            <CurrencySelect style={{ width: '100%' }} disabled={disabled} />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="预估汇率" hasFeedback>
                        {getFieldDecorator('prerate', {
                            rules: [{
                                required: true, message: '请输入预估汇率',
                            }],
                            initialValue: dataSource.prerate
                        })(
                            <InputNumber style={{ width: "100%" }} disabled={disabled} min={0} max={99999999999999} precision={6}/>
                            )}
                    </FormItem>
                </Form>

            </Modal>

        );
    }
})


